<template>
  <div class="content">
    <!--    户表昨日用量排名前十-->
    <div class="content-top">
      <span class="active">户表昨日用量（m³）</span>
<!--      <span></span>-->
<!--      <span class="active">昨日日用量（m³）排名</span>-->
<!--      <span :class="activeIndex === 1 ? 'active-type' : ''" @click="changeTab(1)">大用户表</span>-->
<!--      <span :class="activeIndex === 0 ? 'active-type' : ''" @click="changeTab(0)">户表</span>-->
    </div>
    <div class="content-bottom">
      <div class="swiper-container visual_swiperXb visual_chart">
        <div class="swiper-wrapper">
          <div class="swiper-slide" ref="main4" style="width: 100%; height: 100%;">
            <dv-capsule-chart :config="configXb1" style="width: 90%; height: 100%;padding-left: .1rem" />
          </div>
          <div class="swiper-slide" ref="main41" id="main41" style="width: 100%; height: 100%;">
            <dv-capsule-chart :config="configXb2" style="width: 90%; height: 100%;padding-left: .1rem" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
<!--      <div class="swiper-container visual_swiperDb visual_chart" v-show="activeIndex === 1">-->
<!--        <div class="swiper-wrapper">-->
<!--          <div class="swiper-slide" ref="main4" style="width: 100%; height: 2.6rem;">-->
<!--            <dv-capsule-chart :config="configDb1" style="width: 90%; height: 2.6rem;padding-left: .1rem" />-->
<!--          </div>-->
<!--          <div class="swiper-slide" ref="main41" id="main41" style="width: 100%; height: 2.6rem;">-->
<!--            <dv-capsule-chart :config="configDb2" style="width: 90%; height: 2.6rem;padding-left: .1rem" />-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="swiper-pagination"></div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css"
import {usageTop10ForXb} from "../../../api/bigScreen";
export default {
  name: 'DayDosageTop10Xb',
  data() {
    return {
      // activeIndex: 1,
      // configDb1: {}, // 大用户表前五
      // configDb2: {}, // 大用户表后五
      configXb1: {},
      configXb2: {}
    }
  },
  mounted() {
    this.getListXb()
    setTimeout(() => {
      this.initSwiperXb()
      // this.initSwiperDb()
    },1000)
  },
  methods: {
    // 切换户表和大用户表按钮
    changeTab(index) {
      this.setActiveItem(index)
    },
    // 设置当前展示的图表
    setActiveItem(index) {
      this.activeIndex = index
    },
    getListXb() {
      let _temp = []
      usageTop10ForXb({n: 10}).then(response => {
        if(response.code === 200) {
          response.data.forEach(item => {
            let obj = {
              name: item.terminalId == null ? 'null' : item.terminalId,
              value: item.value
            }
            _temp.push(obj)
          })
          this.configXb1 = {
            data:_temp.slice(0, 5),
            showValue: true
          }
          this.configXb2 = {
            data:_temp.slice(5, _temp.length),
            showValue: true
          }
        }
      })
    },
    // getListDb() {
    //   let _temp = []
    //   usageTop10ForXb({n: 10}).then(response => {
    //     if(response.code === 200) {
    //       response.data.forEach(item => {
    //         let obj = {
    //           name: item.terminalId == null ? 'null' : item.terminalId,
    //           value: item.value
    //         }
    //         _temp.push(obj)
    //       })
    //       this.configDb1 = {
    //         data:_temp.slice(0, 5),
    //         showValue: true
    //       }
    //       this.configDb2 = {
    //         data:_temp.slice(5, _temp.length),
    //         showValue: true
    //       }
    //     }
    //   })
    // },
    // 初始化轮播
    initSwiperXb() {
      var mySwiper = new Swiper('.visual_swiperXb', {
        autoplay: true,//可选选项，自动滑动
        direction: 'vertical',//可选选项，滑动方向
        speed: 2000,//可选选项，滑动速度
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        }
      })
    },
    // 初始化轮播
    // initSwiperDb() {
    //   var mySwiper = new Swiper('.visual_swiperDb', {
    //     autoplay: true,//可选选项，自动滑动
    //     direction: 'vertical',//可选选项，滑动方向
    //     speed: 2000,//可选选项，滑动速度
    //     pagination: {
    //       el: '.swiper-pagination',
    //       clickable: true,
    //     }
    //   })
    // }
  }
}
</script>
<!--<style src="../../../assets/static/css/swiper.min.css" scoped></style>-->
<style lang="scss" scoped>
.content-top {
  //padding: .1rem 0 0.1rem 0.2rem;
  cursor: pointer;
  height: 5vh;
  line-height: 5vh;
  padding-left: .2rem;
  span {
    color: #00d8ff;
    font-size: .2rem;
    font-weight: 520;
    font-family: "Adobe 仿宋 Std R";
    padding: 0 .1rem;
  }

  span:first-child {
    //border-right: 0.01rem solid #1950c4;
    padding-left: 0;
  }

  span.active {
    color: #fff;
  }
  .active-type {
    font-size: .18rem;
    margin: .1rem;
    padding: .05rem .05rem;
    background: #3aa0e5;
    color: white;
    border-radius: 5px;
  }
}
.content-bottom {
  height: 21vh;
  padding: .1rem .1rem;
  .visual_chart{
    font-family: 'Adobe 仿宋 Std R';
    height: 21vh;
  }
}
::v-deep .swiper-pagination-bullet{
  opacity: .2;
}
::v-deep .swiper-pagination-bullet-active{
  background: #0b5bab;
  opacity: 2;
}
::v-deep .dv-capsule-chart .unit-label {
  color: #000e4a !important;
}
</style>
